import React, { Component } from 'react';
import { Spin, Button } from 'antd';
import { action, observable } from "mobx";
import { observer } from 'mobx-react';
import { useHistory } from 'react-router-dom';
import "../assets/sass/News.scss";

@observer
class NewsList extends Component
{
    constructor(props)
    {
        super(props);
        console.log(this.props);
    }
    @observable spinning = false;

    @observable data = [];

    @observable datatest = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

    @observable lileght = 1;

    @action
    GetNewsList = async () =>
    {
        this.spinning = true;
        let response = await fetch("http://localhost:3065/getTest");
        if (response.ok) {
            this.data = await response.json();
        };
        this.spinning = false;
    };

    componentDidMount()
    {
        this.GetNewsList();
        // let data = {
        //     no: "1",
        //     name: "leo666",
        //     gender: "male"
        // };
        let mydata = new FormData();
        mydata.append('name', "1");
        mydata.append('age', "666");
        console.log(mydata);
        fetch("http://localhost/phpwarehouse/test/reactAsny.php", {
            method: "POST",
            body: mydata
        })
            .then(res => res.json())
            .then(data =>
            {
                console.log(data);
            });
    }

    render()
    {
        return (
            <div className="wrapper">
                <div><Spin size="large" spinning={this.spinning} /></div>
                <Button onClick={() => { alert("✌"); }}>{this.spinning ? "点我" : "点你🐎"}</Button>
                <ul>
                    {
                        this.data.map((item, index) =>
                        {
                            return (
                                <li key={item.id}>
                                    {item.name}
                                </li>
                            );
                        })
                    }
                </ul>
            </div>
        );
    }
}



export default NewsList;
